﻿@model Sheng.WeixinConstruction.Management.Shell.Models.ShakingLotteryGiftEditViewModel

@{
    ViewBag.Title = "ShakingLotteryGiftEdit";
    Layout = "~/Views/Shared/_LayoutBlank.cshtml";
}


<script>

    var _mode = "create";//modify
    var _validator;
    var _campaignId = getQueryString("campaignId");
    var _id = getQueryString("id"); //Gift

    $(document).ready(function () {
        $("[keyenter]").keypress(function (e) {
            if (e.keyCode == 13) {
                save();
            }
        });

        _validator = $("#form").validate({
            onfocusout: false,
            onkeyup: false,
            showErrors: showValidationErrors,
            rules: {
                "txtName": "required",
                //"txtImageUrl": "required",
                "txtProbability": {
                    required: true,
                    number: true,
                    digits: true,
                    range: [0, 1000]
                },
                "txtStock": {
                    required: true,
                    number: true,
                    digits: true,
                    range: [0, 10000]
                }
            },
            messages: {
                "txtName": "请输入名称；",
                //"txtImageUrl": "请上传奖品图片；",
                "txtProbability": {
                    required: "请输入概率数；",
                    number: "概率数请输入有效整数字；",
                    digits: "概率数请输入有效整数字；",
                    range: "概率数请介于 0 到 1000 之间；"
                },
                "txtStock": {
                    required: "请输入库存；",
                    number: "库存请输入有效整数字；",
                    digits: "库存请输入有效整数字；",
                    range: "库存请介于 0 到 10000 之间；"
                }
            }
        });

        loadData();
    });

    function loadData() {
        if (_id == undefined || _id == "") {
            return;
        }

        _mode = "modify";
        $("#btnRemove").show();

        var loadLayerIndex = layer.load(0, {
            shade: [0.2, '#fff']
        });

        $.ajax({
            url: "/Api/Campaign/GetShakingLotteryGift?id=" + _id,
            type: "POST",
            dataType: "json",
            success: function (data, status, jqXHR) {
                layer.close(loadLayerIndex);
                if (data.Success) {
                    var gift = data.Data;
                    $("#txtId").val(gift.Id);
                    $("#txtName").val(gift.Name);
                    $("#txtStock").val(gift.Stock);
                    $("#txtImageUrl").val(gift.ImageUrl);
                    $("#selectIsGift").find("option[value='" + gift.IsGift + "']").attr("selected", true);
                    $("#txtProbability").val(gift.Probability);

                    @if (Model.CampaignBundle.ShakingLottery.Mode == Sheng.WeixinConstruction.Infrastructure.EnumCampaign_ShakingLotteryMode.Period)
                    {
                        <text>

                    $("#selectPeriod").find("option[value='" + gift.Period + "']").attr("selected", true);
                        </text>
                    }

                    loadImage();
                } else {
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest) {
                layer.close(loadLayerIndex);
                alert("Error: " + xmlHttpRequest.status);
            }
        });
    }

    function save() {
        if (_validator.form() == false) {
            return;
        }

        var loadLayerIndex = layer.load(0, {
            shade: [0.2, '#fff']
        });

        var gift = new Object();

        gift.CampaignId = _campaignId;
        gift.Name = $("#txtName").val();
        gift.Stock = $("#txtStock").val();
        gift.ImageUrl = $("#txtImageUrl").val();
        gift.IsGift = $("#selectIsGift").val();
        gift.Probability = $("#txtProbability").val();

         @if (Model.CampaignBundle.ShakingLottery.Mode == Sheng.WeixinConstruction.Infrastructure.EnumCampaign_ShakingLotteryMode.Period)
        {
            <text>
            gift.Period = $("#selectPeriod").val();
            </text>
        }
        
        var url = "/Api/Campaign/CreateShakingLotteryGift";

        if (_mode == "modify") {
            gift.Id = $("#txtId").val();
            url = "/Api/Campaign/UpdateShakingLotteryGift";
        }

        $.ajax({
            url: url,
            type: "POST",
            dataType: "json",
            data: JSON.stringify(gift),
            success: function (data, status, jqXHR) {
                layer.close(loadLayerIndex);
                if (data.Success) {
                    var index = parent.layer.getFrameIndex(window.name);
                    // parent.layer.close(index);

                    if (_mode == "create") {
                        parent.loadDataAndCloseLayer(index);
                    }
                    else {
                        parent.loadDataOnPageAndCloseLayer(index);
                    }

                } else {
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest) {
                layer.close(loadLayerIndex);
                alert("Error: " + xmlHttpRequest.status);
            }
        });
    }

    function removeData() {
        var id = $("#txtId").val();
        if (id == undefined || id == "") {
            return;
        }

        var msg = "是否确认删除？<br/>删除奖品时会连同已中得该奖品的中奖记录一并删除！"

        var confirmLayerIndex = layer.confirm(msg, {
            btn: ['确认', '取消'], //按钮
            shade: [0.4, '#393D49'],
            title: false,
            closeBtn: false,
            shift: _layerShift
        }, function () {
            layer.close(confirmLayerIndex);

            var loadLayerIndex = layer.load(0, {
                shade: [0.2, '#fff']
            });

            $.ajax({
                url: "/Api/Campaign/RemoveShakingLotteryGift?id=" + id,
                type: "POST",
                dataType: "json",
                success: function (data, status, jqXHR) {
                    if (data.Success) {
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.loadDataOnPageAndCloseLayer(index);

                    } else {
                        layer.closeAll();
                        layerAlert(data.Message);
                    }
                },
                error: function (xmlHttpRequest) {
                    layer.closeAll();
                    alert("Error: " + xmlHttpRequest.status);
                }
            });
        });
    }

    function changePage(url) {
        window.location.href = url + "?campaignId=" + _campaignId + "&id=" + _id;
    }

    function cancel() {
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index); //再执行关闭
    }

    function loadImage() {
        $("#image").attr("src", $("#txtImageUrl").val());
    }

    function uploadFile() {
        __showFileUpload(getUploadResult);
    }

    function getUploadResult(fileServiceAddress, result) {
        var url = fileServiceAddress + result.Data.StoreFilePath;
        $("#txtImageUrl").val(url);
        loadImage();
    }

    function removeImage() {
        $("#txtImageUrl").val("");
        loadImage();
    }

</script>


<div style="margin-left:20px; margin-right:20px; margin-top:20px;">
    <span id="spanTitle" class="font_black_24">奖品</span>
</div>

<div style=" background-color:#ccc; margin-left:20px; margin-right:20px; margin-top:10px; height:1px;">

</div>

<div style=" position:absolute; overflow:auto ;margin-top:25px;left:30px; right:30px; bottom:60px; top:50px; ">

    <form id="form">
        <input type="hidden" id="txtId"/>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td height="36">中奖：</td>
                <td>
                    <select id="selectIsGift" name="selectIsGift" class="input_16" style="width:200px;">
                        <option value="true">是</option>
                        <option value="false">否</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td></td>
                <td valign="top">
                    <div class="font_gray_13" style="width: 96%; margin-bottom: 10px;">
                        选择否表示此项目为没有中奖，可在概率数中指定没有中奖的概率。如果在活动中（或周期模式的周期中）没有设置为“否”的特殊“奖品”，
                        则相当于摇奖必中（在有库存的情况下）。
                    </div>
                </td>
            </tr>
            <tr>
                <td width="110" height="36">名称：</td>
                <td><input id="txtName" name="txtName" type="text" class="input_16" maxlength="50" style="width:96%; " /></td>
            </tr>
            @if (Model.CampaignBundle.ShakingLottery.Mode == Sheng.WeixinConstruction.Infrastructure.EnumCampaign_ShakingLotteryMode.Period)
            {
                <tr>
                    <td width="110" height="36">所属周期：</td>
                    <td>
                        <select id="selectPeriod" name="selectPeriod" class="input_16" style="width:96%; "> 
                            <option value="" selected></option>                
                            @foreach (var item in Model.PeriodList)
                            {
                                <option value="@item.Id">@item.Name</option>
                            }
                        </select>
                    </td>
                </tr>
            }
            <tr>
                <td height="36">库存：</td>
                <td><input id="txtStock" name="txtStock" type="text" class="input_16" maxlength="4" style="width:96%; " /></td>
            </tr>
            <tr>
                <td valign="top">
                    <div style="margin-top:5px;">
                        图片：
                    </div>
                </td>
                <td valign="top">
                    <div class="divBorder_gray" style="margin-bottom:5px;width:96%;">
                        <div style="padding:5px;">
                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td width="120"><img id="image" src="" alt="" style="max-width:300px;" /></td>
                                    <td align="right">
                                        <input id="txtImageUrl" name="txtImageUrl" type="hidden" class="input_16" style="width:96%; " maxlength="500" keyenter />
                                        <a href="javascript:void(0)" onclick="uploadFile()">上传新图片</a><br />
                                        <a href="javascript:void(0)" onclick="removeImage()">删除图片</a>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </td>
            </tr>
            
            <tr>
                <td height="36">概率数：</td>
                <td><input id="txtProbability" name="txtProbability" type="text" class="input_16" maxlength="4" style="width:96%; " /></td>
            </tr>
            <tr>
                <td></td>
                <td valign="top">
                    <div class="font_gray_13" style="width: 96%; margin-bottom: 10px;">
                        输入一个整数表示此奖品的中奖概率分数，分母为所有奖品的概率数之和。
                    </div>
                </td>
            </tr>
        </table>


    </form>

</div>

<div style=" background-color:#ccc; position:absolute; bottom:55px; left:20px;right:20px; height:1px;">

</div>

<div style="position:absolute; bottom:15px; left:20px;right:20px;">


    <div style="float:left;">
        <input name="btnRemove" type="button" class="btn_red" id="btnRemove" value="删 除" style="display:none" onclick="removeData()" />
    </div>

    <div style="float:right">
        <input name="btnSave" type="button" class="btn_blue" id="btnSave" value="保 存" onclick="save()" />
        <input name="btnCancel" type="button" class="btn_blue" id="btnCancel" value="取 消" onclick="cancel()" />
    </div>
    <div style="clear:both">
    </div>
</div>


@Helpers.FileUpload()
